<template>
  <div class="Roll">
    <div class="tal_boxs">
      <div class="left">
        <p @click="get_tal(0)" :class="{'activ':activ==0}"><span>所有ROLL房</span></p>
        <p @click="get_tal(1)" :class="{'activ1':activ==1}"><span>我参与的</span></p>
        <p @click="get_tal(2)" :class="{'activ1':activ==2}"><span>推荐ROLL房</span></p>
      </div>
      <div class="right"><input v-model="rollName" type="text" placeholder="请输入Roll房名称"/><p @click="get_shechar">搜索</p></div>
    </div>
    <div class="Roll-cent">
      <ul>  <!-- Ongoing  进行中   hover：显示加入房间addroll  ！！ closure结束关闭  hover:显示查看详情-->
        <li v-for="rollRoom in rollRoomList" :key="rollRoom.id" :class="['Ongoing', 'closure'][rollRoom.status - 0]">
          <div class="text-box">
            <div>
              <p :class="['zb', 'gf'][rollRoom.rollType - 1]">{{['主播', '官方'][rollRoom.rollType - 1]}}</p>
              <p>{{rollRoom.lotteryTime || '人满即开'}}</p>
            </div>
            <div>{{rollRoom.rollName}}</div>
            <div>
              <div>
                <p v-for="skin in rollRoom.skinCount" :key="skin.id"><img :src="skin.image"></p>
              </div>
              <div>
                <p><img src="../assets/gun_icon1.png">{{rollRoom.skinNum}}</p>
                <p><img src="../assets/people.png">{{rollRoom.personNum}}</p>
                <p><img src="../assets/money-icon.png" >{{rollRoom.priceNum}}</p>
              </div>
            </div>
          </div>
          <div class="addroll">
            <div><img :src="rollRoom.userImage" ></div>
            <div>{{rollRoom.userName}}</div>
            <div @click="goto_rollroom(rollRoom)">加入房间</div>
          </div>
          <div class="end-box">
            <div>
              <div>已结束</div>
              <div>开奖时间：{{rollRoom.lotteryTime || '人满即开'}}</div>
            </div>
            <div><div @click="goto_rollroom(rollRoom)">查看详情</div></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="addloding" v-show="totalPage > pageNum" @click="loadmore"></div>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        activ: 0,
        rollName: '',
        pageNum: 1,
        rollRoomList: [],
        totalPage: 1
      }
    },
    created() {
      this.getRollroomList()
    },
    methods: {
      loadmore() {
        this.pageNum ++
        this.getRollroomList()
      },
      get_tal(e){
        this.pageNum = 1
        this.activ = e;
        this.getRollroomList()
      },
      get_shechar(){
        this.pageNum = 1
        this.getRollroomList()
      },
      goto_rollroom(rollRoom){
        this.$store.commit('setCurrentRollRoom', rollRoom)
        this.$router.push({
                  path: `/rollroom`,
            })
      },
      getRollroomList() {
        // this.$loading.show()
        this.$api.get('/api/roll/list', {
          pageNum: this.pageNum,
          pageSize: 10,
          name: this.rollName,
          type: this.activ
        }, res => {
          // this.$loading.hide()
          if (res.code === 200) {
            res.data.content.forEach(ele => {
              if (ele.skinCount.length > 3) {
                ele.skinCount.length = 3
              }
            })
            if (this.pageNum === 1) {
              this.rollRoomList = res.data.content
            } else {
              this.rollRoomList = [ ... this.rollRoomList, ... res.data.content ]
            }
            this.totalPage = res.data.totalPages
            // console.log(res)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .addloding{
    background-image: url(../assets/jzgd-icon.png);
    background-size: 100% 100%;
    width: 174px;
    height: 35px;
    margin: 10px auto 0;
    cursor: pointer;
  }
  .Roll-cent ul .closure .end-box>div:nth-child(2){
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    cursor: pointer;
  }
  .Roll-cent ul .closure .end-box>div:nth-child(2) div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 290px;
    height: 52px;
    margin-top: -26px;
    margin-left: -145px;
    line-height: 52px;
    border: 1px solid #FFA22A;
    color: #FFA22A;
    font-size: 22px;
    font-weight: 400;
  }
  .Roll-cent ul .closure .end-box>div:first-child>div:nth-child(2){
    font-size: 20px;
    color: #999999;
    font-weight: 300;
  }
  .Roll-cent ul .closure .end-box>div:first-child>div:first-child{
    margin: 30px auto 22px;
    width: 100px;
    height: 100px;
    border: 3px solid #999999;
    line-height: 100px;
    color: #999999;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 400;
  }
  .Roll-cent ul .closure .end-box>div:first-child{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .Roll-cent ul li .end-box{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);
  }
  .Roll-cent ul .closure .end-box:hover >div:first-child{
    display: none;
  }
  .Roll-cent ul .closure .end-box:hover >div:last-child{
    display: block;
  }
  .Roll-cent ul .closure .end-box{
    display: block;
  }
  .Roll-cent ul li .addroll >div:nth-child(3){
    margin: 0px auto;
    width: 290px;
    height: 52px;
    line-height: 52px;
    font-size: 20px;
    background-color: #FFA22A;
  }
  .Roll-cent ul li .addroll >div:nth-child(2){
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 10px auto 8px;
    width: 215px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFFFFF;
  }
  .Roll-cent ul li .addroll >div:first-child{
    margin: 10px auto;
    width: 86px;
    height: 86px;
    border: 2px solid #4169A6;
    border-radius: 50%;
    overflow: hidden;
  }
  .Roll-cent ul li .addroll >div:first-child img{
    width: 100%;
    height: 100%;
  }
  .Roll-cent ul .Ongoing:hover .addroll{
    display: block;
  }
  .Roll-cent ul li .addroll{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.6);
    display: none;
    cursor: pointer;
  }
  .Roll-cent ul li .text-box>div:nth-child(3)>div:nth-child(2)>p{
    display: flex;
    align-items: center;
  }
  .Roll-cent ul li .text-box>div:nth-child(3)>div:nth-child(2)>p img{
    margin-right: 5px;
  }
  .Roll-cent ul li .text-box>div:nth-child(3)>div:nth-child(2)>p:last-child{
    color: #FFA22A;
  }
  .Roll-cent ul li .text-box>div:nth-child(3)>div:nth-child(2){
    display: flex;
    justify-content: space-between;
    width: 320px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    color: #A7B1BB;
  }
  .Roll-cent ul li .text-box>div:nth-child(3)>div:first-child p img{
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 55px;
    max-height: 55px;
    width: auto;
    height: auto;
    transform: translate(-50% , -50%);
  }
  .Roll-cent ul li .text-box>div:nth-child(3)>div:first-child p{
     height: 70px;
     width: 70px;

     position: relative;
     background-image: url(../assets/roll_list_lb_bg.png);
     background-size: 100% 100%;
  }
  .Roll-cent ul li .text-box>div:nth-child(3)>div:first-child{
    height: 68px;
    display: flex;
  }
  .Roll-cent ul li .text-box>div:nth-child(3){
    display: flex;
    align-items: flex-end;
    margin-top: 56px;
    margin-left: 4px;
    justify-content: space-between;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .Roll-cent ul li .text-box>div:nth-child(2){
    margin-top: 20px;
    padding-left: 20px;
    width: 215px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size: 22px;
    color: #FFFFFF;
  }
  .Roll-cent ul li .text-box>div:first-child>p:first-child{
    display: flex;
    align-items: center;
    height: 34px;
    width: 112px;
    color: #FFFFFF;
    padding-left: 40px;
    background-size: 100% 100%;
    box-sizing: border-box;
    line-height: 34px;
  }
  .Roll-cent ul li .text-box>div:first-child .gf{
    background-image: url(../assets/roll_gf_tips_icon.png);
  }
  .Roll-cent ul li .text-box>div:first-child .zb{
    background-image: url(../assets/roll_zb_tips_icon.png);
  }
  .Roll-cent ul li .text-box>div:first-child>p:last-child{
    height: 20px;
  }
  .Roll-cent ul li .text-box>div:first-child{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 20px;
    color: #A7B1BB;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .Roll-cent ul li .text-box{

  }
  .Roll-cent ul li{
    width: 583px;
    height: 211px;
    background-image: url(../assets/roll_list_bg.jpg);
    background-size: 100% 100%;
    position: relative;
  }
  .Roll-cent ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .Roll-cent{
    padding: 28px 8px 0;
    min-height: 900px;
  }
  .tal_boxs .right p{
    width: 128px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    background-color: #E59328;
    cursor: pointer;
  }
  .tal_boxs .right{
    display: flex;
  }
  .tal_boxs .right input{
    width: 250px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    outline: none;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #2C3341;
    border: none;
    color: #939CAB;
  }
  .tal_boxs .left{
    display: flex;
  }
  .tal_boxs .left .activ{
    background-image: url(../assets/bk-tal1-bgs.png);
    background-position: 0px 0;
    background-size: 100% 100%;
    color: #333333;
  }
  .tal_boxs .left .activ::after{
    display: none;
  }
  .tal_boxs .left .activ1::after{
    display: none;
  }
  .tal_boxs .left .activ1{
    background-image: url(../assets/bk-tal2-bgs.png);
    background-size: 100% 100%;
    background-position: 0px 0;
    color: #333333;
  }
  .tal_boxs .left>p{
    height: 49px;
    line-height: 49px;
    width: 221px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    background-position: -221px 0;
     background-repeat:no-repeat;
     background-size: 100% 100%;
     position: relative;
     overflow: hidden;
     transition: all .5s;
  }
  .tal_boxs .left>p:nth-child(1){
    position: relative;
    z-index: 9;
    background-image: url(../assets/bk-tal1-bgs.png);
  }
  .tal_boxs .left>p:nth-child(2){
    position: relative;
    z-index: 8;
    background-image: url(../assets/bk-tal2-bgs.png);
  }
  .tal_boxs .left>p::after{
    position: absolute;
    top: -20px;
    bottom: -20px;
    right: 19px;
    background-color: #242C40;
    content: "";
    width: 40px;
    transform: rotate(31deg);
  }
  .tal_boxs .left>p:not(:first-child)::before{
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -19px;
    background-color: #242C40;
    content: "";
    width: 40px;
    transform: rotate(31deg);
  }
  .tal_boxs .left>p span{
    position: relative;
    z-index: 11;
  }
  .tal_boxs .left>p:last-child::after{
    display: none;
  }
  .tal_boxs .left>p:hover{
    background-image: url(../assets/bk-tal2-bgs.png);
    background-position: 0px 0;
    transition: all .5s;
    color: #333333;
  }
  .tal_boxs .left>p:first-child:hover{
    background-image: url(../assets/bk-tal1-bgs.png);
    background-position: 0px 0;
    transition: all .5s;
    color: #333333;
  }
  .tal_boxs .left>p:hover::after{
    display: none;
  }
  .tal_boxs .left>p:not(:first-child){
    margin-left: -29px;
  }
  .tal_boxs{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #242C40;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .Roll{
    background-color: #0E1421;
    width: 1200px;
    margin: 0 auto;
    padding-top: 36px;
    padding-bottom: 30px;
  }
</style>
